<template>
  <div>
    <h2>{{msg}}</h2>
    <hr>1、直接写出
    <h2>{{$store.state.count}}</h2>
    <button @click="$store.commit('add')">加</button>
    <button @click="$store.commit('reduce')">减</button>
     <hr>
     <button @click="$store.commit('addNum',10)">加10</button>
     <button @click="$store.commit({type: 'addNum',num: 10})">加10</button>
    <br>
    // 2、利用计算
     {{count}}
    <br>
     <input v-model="addNumber"  >
     <button @click="$store.commit('addNum',addNumber)">加填入数据</button>
    <br>
    <button @click="addNum(10)">方法调用增加数据</button>
    <hr>
    <button @click="addMap(15)">另外的调用方式</button>

    <hr>
    <button @click="addAction()">actions调用addAction</button>
    <button @click="reduceAction()">actions调用reduceAction</button>

  </div>
</template>

<script>
/* eslint-disable */
import store from '@/store/index'
import {mapState,mapMutations,mapGetters, mapActions} from 'vuex'

export default {
  name: 'Count',
  data () {
    return {
      msg: 'vuex全局变量',
      addNumber: 0
    }
  },
  store,
//   computed: { //计算，有缓存  第二种
//       count(){ 
//           return this.$store.state.count;  //这里一定要写this不然找不到$store
//       }
//   }
    // computed: mapState({  //第三种
    //     count: state => state.count
    // })
    // computed: mapState({
    //     count: function (state){
    //         return state.count;
    //     }
    // })
    computed: { // 计算函数
      ...mapState(['count']),
      // count(){ //返回调用改方法
      //   return this.$store.getters.count;
      // }
      // ...mapGetters(['count']),
    },
    // methods:mapMutations(['add','reduce','addNum'])
    // methods: {
    //   ...mapMutations(['add','reduce','addNum'])
    // },
    methods: {
      ...mapMutations(['add','reduce','addNum']),
      ...mapMutations({  addMap:'addNum' }),
      ...mapActions(['addAction','reduceAction'])
    },

}
</script>

<style scoped>
</style>
